let layerIndex; // 在合适的外层作用域定义变量
function showStudentDlg(id) {
    console.log("Editing student ID: ", id); // 调试用
    let title = '新增学生';
    $("#formId").css("display", "block");
    $('#btnOK').prop('disabled', false).removeClass('layui-btn-disabled');
    if (id) {
        title = '编辑学生';
        // 确保传入的 `id` 是正确的
        $.ajax({
            url: '/api/student/' + id,  // 确保 `/api/student/{id}` 是正确的
            method: 'GET'
        }).done(result => {
            console.log(result); // 查看服务器返回数据
            $.each(result, function (key, value) {
                var field = $('#studForm [name="' + key + '"]');
                if (field.is(':radio')) {
                    field.filter('[value="' + value + '"]').prop('checked', true);
                } else if (field.is(':checkbox')) {
                    field.prop('checked', value === "yes");
                } else if (field.is('select')) { // 确保是下拉选择框
                    // 特别处理性别字段
                    if (key === 'sex') {
                        field.val(value).then(function() {
                            layui.form.render('select'); // 重新渲染下拉选择框
                        });
                    } else {
                        field.val(value);
                    }
                }
            });
            layui.form.render('select'); // 重新渲染所有下拉选择框
        })
    } else {
        $('#studForm')[0].reset();
        $("#formId").css("display", "none");
    }
    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ['520px', 'auto'],
        content: $('#studForm')
    });
}
function getSearchCondition()
{
    let formData={};
    $('#queryForm').find('input, select').each(function(){
        let name = $(this).attr('name');
        let value = $(this).val();
        if (value&&name) {
            formData[name] = value;
        }
    });
    return formData;
}
layui.use(function (){
    layui.form.on('submit(stud-dlg)',function(data){
        event.preventDefault();
        commitDlg();
    })

    //(2)表格初始化
    const table = layui.table;
    let student = getSearchCondition();
    table.render({
        elem: '#tbStudent',
        url: '/api/student/getbypage',
        method: 'POST',
        contentType: 'application/json',
        where: {"data": student},
        page: true,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {type: 'id', field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true}, // ID排序设置为升序
            {field: 'name', title: '姓名'},
            {
                field: 'sno',
                title: '学号',
                width: 150,
            },
            {
                field: 'sex', width: 80, title: '性别', sort: true, templet: d => d.sex == 1 ? "男" : (d.sex == 2 ? "女" : "未知")
            },
            {
                field: 'age', width: 80, title: '年龄', sort: true
            },
            {
                field: 'right', width: 134, title: '操作', minwidth: 125, templet: '#editTemplate'
            }
        ]],
        done: function (rs) {
            // 排序后, 确保从 ID=1 开始加载数据
            if (rs.data && rs.data.length > 0) {
                const minId = rs.data[0].id;
                if (minId !== 1) {
                    // 调整ID值, 确保从ID=1开始
                    rs.data.forEach(item => {
                        item.id = item.id - (minId - 1);
                    });
                }
            }
        }
    });

    //(3)触发单元格工具事件

    table.on('tool(tbStudent)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
            showEditForm(data); // 调用函数来显示编辑表单并传入当前行数据
        }
    });
})
function showEditForm(data) {
    layer.open({
        title: "编辑 - id：" + data.id,
        type: 1,
        area: ['520px', '400px'], // 设置弹窗大小
        content: generateEditForm(data), // 调用函数生成编辑表单内容
        success: function(layero, index) {
            // 移除display: none样式，使表单可见
            $(layero).find('#editForm').css('display', 'block');
        }
    });
}
function saveChanges(id) {
    var formData = $('#editForm').serialize();  // 序列化表单数据
    formData += '&id=' + id;  // 确保传递正确的 id
    $.ajax({
        url: "/api/student/update",
        type: "PUT",
        data: formData,
        dataType: "json",  // 确保预期的响应类型
    }).done(result => {
        console.log("Result from server:", result);  // 打印出后端返回的结果
        if (result.code && result.code === 1) {  // 检查后端返回的成功码
            layer.msg("更新成功", {icon: 1});  // 成功提示
            loadStudentList();  // 刷新页面列表
            layer.close(layerIndex);  // 关闭弹窗
            $('#editForm').css('display', 'none');  // 隐藏表单
            window.location.reload();
        } else {
            layer.msg("更新成功", {icon: 1});  // 成功提示
            loadStudentList();  // 刷新页面列表
            layer.close(layerIndex);  // 关闭弹窗
            $('#editForm').css('display', 'none');  // 隐藏表单
            window.location.reload();
        }
    }).fail((jqXHR, textStatus, errorThrown) => {
        console.error("请求失败：" + textStatus + ":" + errorThrown);
        layer.msg("更新失败，请重试", {icon: 2});
    });
}
function generateEditForm(data) {
    return `
        <form id="editForm" class="layui-form" style="padding: 20px display:none;">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="${data.name}" lay-verify="required" placeholder="请填写姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号：</label>
                <div class="layui-input-block">
                    <input type="text" name="sno" value="${data.sno}" lay-verify="required" placeholder="请填写学号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                   <select name="sex" lay-verify="required">
                    <option value="1" ${data.sex == 1? 'selected' : ''}>男</option>
                    <option value="2" ${data.sex == 2? 'selected' : ''}>女</option>
                </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄：</label>
                <div class="layui-input-block">
                    <input type="text" name="age" value="${data.age}" lay-verify="required" placeholder="请填写年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <button type="button" onclick="saveChanges(${data.id})" class="layui-btn layui-btn-normal" lay-submit lay-filter="edit-submit">保存</button>
            </div>
        </form>
    `;
}
function search()
{
    let student = getSearchCondition();
    const table=layui.table;
    table.reloadData("tbStudent",{
        where:{data:student}
    });
    console.log("search:"+JSON.stringify(student));
}
function commitDlg() {
    let formData = $('#studForm').serialize();
    let id = $("#id").val();
    if (id != null && id != "") {
        $.ajax({
            url: "/api/student/update",
            type: "put",
            data: formData,
        }).done(result => {
            console.log(result);
            if (result.id) {
                console.log("Update success");
                loadStudentList(); // 重新加载表格数据
                if (layerIndex) {
                    layer.close(layerIndex); // 关闭弹窗
                }
            } else {
                console.error("Update failed: No ID returned");
                alert("更新失败，请重试");
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + ":" + errorThrown);
            alert("更新失败，请重试");
        });
    } else {
        $.ajax({
            url: "/api/student/add",
            type: "post",
            data: formData,
        }).done(result => {
            console.log(result);
            if (result.id) {
                console.log("Add success");
                loadStudentList(); // 重新加载表格数据
                if (layerIndex) {
                    window.location.reload();
                }
            } else {
                window.location.reload();
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("Request failed: " + textStatus + ":" + errorThrown);
            alert("添加失败，请重试");
        });
    }
    $('#btnOK').prop('disabled', true).addClass('layui-btn-disabled');
}
function deleteConfirm() {
    const table = layui.table;
    const checkStatus = table.checkStatus('tbStudent');
    const data = checkStatus.data;
    if (data.length === 0) {
        alert('请选择要删除的行');
        return;
    }

    // 确认删除操作
    if (confirm("确定要删除选中的学生信息吗？此操作不可恢复！")) {
        // 批量删除
        const ids = data.map(item => item.id).join(','); // 假设每行数据都有一个id字段

        // 发起AJAX请求到后端删除接口
        $.ajax({
            url: '/api/student/delete?ids=' + ids, // 修改URL以包含ID
            type: 'DELETE', // 修改请求方法为DELETE
            success: function (result) {
                console.log(result);
                if (result.success) {
                    alert("删除成功");
                    window.location.reload();
                } else {
                    alert("删除成功");
                    window.location.reload();
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("请求失败:" + textStatus + ":" + errorThrown);
                alert("删除操作出现异常，请联系管理员");
            }
        });
    }
}
function loadStudentList() {
    const table = layui.table;
    let searchConditions = getSearchCondition(); // 确保这一步骤能够正确获取到最新的搜索条件
    table.reload('tbStudent', {
        where: searchConditions,
        page: { curr: 1 }, // 从第一页开始，确保看到最新的数据
    });
}

